//初始化dom
const operatorDOM = document.querySelector(".operator");
const albumNameTextDOM = operatorDOM.querySelector("input[type='text']");
const albumNameBtnDOM = operatorDOM.querySelector("button");
const addPhotoDOM = operatorDOM.querySelector("a");
const addFileDOM = operatorDOM.querySelector("input[type='file']");

const imageListDOM = document.querySelector(".image-list");
const fenyeDOM = document.querySelector(".fenye");
const albumListDOM = document.querySelector(".album-list");
const boxImageListDOM = document.querySelector(".box");
const defaultAlbumADOM = albumListDOM.querySelector("a");


// console.log(defaultAlbumADOM);
defaultAlbumADOM.addEventListener("click" ,e=>{
  // console.log(e.target);
  xhrRequest("GET","/album/images/default",null,function(res){
    renderPhotoList(res);
  });
});
addPhotoDOM.addEventListener("click",function(event){
  addFileDOM.click();
});
var count=0;
addFileDOM.addEventListener("change", function(event){
  var formdata = new FormData();
  formdata.append("image",event.target.files[0]);
  xhrRequest("POST","/album/upimg",formdata,function(res){
    count = imageListDOM.childElementCount;
    addPic(res.filename);
    // renderPhotoList(res);
  });
});

albumNameBtnDOM.addEventListener("click",function(event){
  // addAlbum(albumNameTextDOM.value);

  xhrRequest("GET","/album/createAlbum/"+albumNameTextDOM.value,null,function(res){
    albumNameTextDOM.value = "";
    renderAlbumList();
  });
});

function renderAlbumList(){
  const div = albumListDOM.querySelector("div");
  div.innerText = "";
  xhrRequest("GET","/album/getAlbum",null,function(res){
    res.forEach(function(name){
      var aDOM = document.createElement("a");
      aDOM.innerText = name;
      aDOM.href = "javascript:void();";
      aDOM.addEventListener("click",e=>{
        xhrRequest("GET","/album/images/"+name,null,function(res){
          renderPhotoList(res);

        });
      });

      albumListDOM.appendChild(aDOM);
    });
  });
}

function xhrRequest(type, url, formdata,method){
  // console.log("type="+type+",url="+url+"fordata="+formdata+"method="+method);
  var xhr = new XMLHttpRequest();
  xhr.open(type, url);
  xhr.responseType = "json";
  xhr.onreadystatechange = function(){
    if(xhr.status==200 && xhr.readyState==4){
      // console.log(xhr.response);
      method(xhr.response);
    }
  }
  if (arguments.length>=4) {

    xhr.send(formdata);
  }
}

function renderPhotoList(res){
  imageListDOM.innerText = "";
  if(res.length<=10){
    res.forEach(img=>{
      addPic(img.filename);
    });
  }else {
    res.slice(0,10).forEach(img=>{
    addPic(img.filename);
    });
  }
  renderFenye(res);
}

function addPic(url){
  const divDOM = document.createElement("div");
  divDOM.className = "image";
  const img = new Image();
  img.src = "/album/img/"+url;
  divDOM.appendChild(img)
  imageListDOM.insertAdjacentElement("beforeEnd",divDOM);
}

function renderFenye(res){
  var num = res.length/10;
  var name = [];
  for(let i=0;i<=num;i++){
    name.push(i)
  }
  ctFenye(name,res);
}

function ctFenye(name,res){
  var fenyeDOM = document.createElement("div");
  fenyeDOM.className="fenyeDiv";
  console.log(fenyeDOM);
  if(name){
    for(let i=0;i<name.length;i++){
      var pDOM = document.createElement("p");
      pDOM.innerText = name[i];
      pDOM.className="fenyeP";
      console.log(pDOM);
      pDOM.addEventListener("click", function(event){
        var index = parseInt(event.target.innerText);
        if(res.length<10){
          imageListDOM.innerText="";
          renderFenye(res);
          res.forEach(img=>{
            addPic(img.filename);
          });
        }else {
          imageListDOM.innerText="";
          renderFenye();
          var subPhoto = res.slice(index*10,index*10+10);
          subPhoto.forEach(img=>{
            addPic(img.filename);
      });
        }
      });
      fenyeDOM.appendChild(pDOM);
    }
  }
}
